import * as React from "react";
import { Button, Form, Input, Modal } from "antd";
import { FormComponentProps } from "antd/es/form";
// import {FormEvent} from "react";
import { RouteComponentProps, withRouter } from "react-router";
import service from "../../axios/Service";
import { loginIn } from "../../axios/RequestUser";
import * as qs from "qs";
import { loginStorage } from "../../utils/auth";

const FormItem = Form.Item;

// interface Istates {
//     res: boolean;
// }

interface Iprops extends FormComponentProps, RouteComponentProps {}
interface Istates {
  imgUrl: string;
  msgName: string;
  msgButtonState: boolean;
}

class Res extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      imgUrl: "/login/imageCode",
      msgName: "发送",
      msgButtonState: false
    };
  }

  // public handleSubmit = (e: FormEvent) => {
  //     e.preventDefault();
  //     this.props.form.validateFields(() => {
  //         loginIn(this.props.form.getFieldsValue())
  //             .then(value => {
  //                 this.props.history.push(getUrl());
  //                 login(value.data.data.phone, value.data.data);
  //             })
  //             .then(value => {
  //                 window.location.reload();
  //             });
  //     });
  // };
  public getCode = () => {
    const phoneRe = this.props.form.getFieldValue("phone");
    const imageCode = this.props.form.getFieldValue("imageCode");
    if (!/^1[34578]\d{9}$/.test(phoneRe)) {
      Modal.confirm({
        content: "请输入正确手机号"
      });
      return;
    }
    if (!imageCode) {
      Modal.confirm({
        content: "请输入验证码"
      });
      return;
    }
    service
      .get("/login/loginBySmsCode", {
        params: {
          type: 1,
          phone: phoneRe,
          imageCode
        }
      })
      .then(value => {
        alert(JSON.stringify(value.data));
        this.changeButtonStates();
      });
  };
  public changeButtonStates = () => {
    let time: number = 60;
    this.setState({
      msgButtonState: true,
      msgName: time + "s"
    });
    const timeChange = setInterval(() => {
      time--;
      this.setState({
        msgName: time + "s"
      });
    }, 1000);
    setTimeout(() => {
      this.setState({
        msgButtonState: false,
        msgName: "获取"
      });
      clearInterval(timeChange);
    }, 60 * 1000);
  };
  public setImgUrl = () => {
    this.setState({
      imgUrl: `/login/imageCode?user=${new Date()}`
    });
  };
  public register = (e: React.FormEvent) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        service
          .post(
            "/login/registerByPhone",
            qs.stringify(this.props.form.getFieldsValue())
          )
          .then(value => {
            Modal.success({
              content: "注册成功"
            });
            loginStorage(value.data.phone, value.data);
            loginIn(this.props.form.getFieldsValue()).then(value1 => {
              this.props.history.push("/");
            });
          });
      }
    });
  };
  public render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form
          className="login-form"
          onSubmit={this.register}
          layout="horizontal"
        >
          <FormItem
            label="手机号码"
            labelCol={{ span: 5, offset: 1 }}
            wrapperCol={{ span: 15 }}
          >
            {getFieldDecorator("phone", {
              rules: [{ required: true, message: "登录名不能为空" }]
            })(<Input placeholder={"请输入您的手机号"} />)}
          </FormItem>
          <FormItem
            label="密码"
            labelCol={{ span: 5, offset: 1 }}
            wrapperCol={{ span: 15 }}
          >
            {getFieldDecorator("password", {
              rules: [{ required: true, message: "密码不能为空" }]
            })(
              <Input type="password" placeholder={"请输入长度为6-20位的密码"} />
            )}
          </FormItem>
          <FormItem
            label="验证码"
            labelCol={{ span: 5, offset: 1 }}
            wrapperCol={{ span: 15 }}
          >
            {getFieldDecorator("imageCode", {
              rules: [{ required: true, message: "验证码不能为空" }]
            })(
              <Input
                type="text"
                placeholder={"请输入验证码"}
                style={{
                  width: "55%",
                  display: "inline-block",
                  marginRight: "5%"
                }}
              />
            )}
            <span>
              <img
                width={"40%"}
                src={this.state.imgUrl}
                onClick={this.setImgUrl}
                style={{ borderRadius: 5 }}
                height={"30px"}
                alt="验证码"
              />
            </span>
          </FormItem>
          <FormItem
            label="手机验证"
            labelCol={{ span: 5, offset: 1 }}
            wrapperCol={{ span: 15 }}
            style={{ position: "relative" }}
          >
            {getFieldDecorator("smsCode", {
              rules: [{ required: true, message: "手机号不能为空" }]
            })(
              <Input
                type="text"
                placeholder={"请输入手机验证码"}
                style={{
                  width: "75%",
                  display: "inline-block",
                  marginRight: "5%"
                }}
              />
            )}
            <Button
              type="primary"
              disabled={this.state.msgButtonState}
              onClick={this.getCode}
              style={{ width: "20%" }}
            >
              {this.state.msgName}
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              block={true}
              style={{ marginTop: 20 }}
            >
              {"注册"}
            </Button>
          </FormItem>
        </Form>
        {/*</Spin>*/}
      </div>
    );
  }
}

export default withRouter(Form.create()(Res));
